<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box{
             height: 100vh;
            box-sizing: border-box;
            background: rgba(0, 0, 0, 0.7);
            display: flex;
            flex-direction: column;
            justify-content: center;
        }
        .toptitle {
            width: 92vw;
            height: 34.7vw;
            
        }
        .toptitle img {
                width: 100%;
                height: 100%;
            }
            .content {
            height: 77.3vw;
            display: flex;
            justify-content: center;
           
        }
        .pan {
                width: 77.3vw;
                height: 77.3vw;
                background: url(
                        'http://vr1.6rooms.com/tao/i/c1/fdb8f612be2d3c498d9b40ba991ad009.png'
                    )
                    no-repeat;
                background-size: 100% 100%;
                padding: 4vw;
                box-sizing: border-box;
                position: relative;
                
            }
            .paninner {
                    box-sizing: border-box;
                    transform: rotate(120deg);
                    width: 69.3vw;
                    height: 69.3vw;
                    background: url(
                            'http://vr1.6rooms.com/tao/i/s2/a870ce7c80233a6de3027d13b5bd7b95.png'
                        )
                        no-repeat;
                    background-size: 100% 100%;
                }
                .active {
                    animation: fadenum 3s forwards;
                }
                .panbutton {
                    position: absolute;
                    left: 27.9vw;
                    top: 26.75vw;
                    box-sizing: border-box;
                    width: 21.6vw;
                    height: 24vw;
                    background: url(
                            'http://vr1.6rooms.com/tao/i/m1/7849ec2547b06c868dc9edac8a1e62ae.png'
                        )
                        no-repeat;
                    background-size: 100% 100%;
                }
    .popzhuanpan {
        display: flex;
        height: 150.6vw;
        flex-direction: column;
        align-items: center;
        position: relative;
        
        
       
    }
    .bottombutton {
            margin-top: 9.6vw;
            position: relative;
            cursor: pointer;
            width: 59.2vw;
            height: 14.4vw;
            line-height: 14.4vw;
            font-weight: 600;
            color: #ffffff;
            text-align: center; 
            font-size: 4.8vw;
            background: url('http://vr1.6rooms.com/tao/i/v0/4d2620427d42a93b912c4c79517cee80.png')
                no-repeat;
            background-size: 100% 100%;
           
        }
        .handle {
                position: absolute;
                display: none;
                right: 0vw;
                top: 4.3vw;
                width: 21.1vw;
                height: 21.3vw;
                background: url('https://vr0.6rooms.com/images/events/oneyuanhand.webp')
                    no-repeat;
                background-size: 100% 100%;
            }
    @keyframes fadenum {
        0% {
            transform: rotate(0deg);
        }
        100% {
            transform: rotate(2160deg);
        }
    }
`;
    </style>
</head>
<body>
    <div class="box">
        <div class="popzhuanpan">
            <div class="toptitle">
                <img src= 'http://vr1.6rooms.com/tao/i/i6/3a87491694872864c6ab7ed575779541.png'/>
            </div>
            <div class="content">
                <div class="pan">
                    <div class="paninner"></div>
                    <div class="panbutton"></div>
                </div>
            </div>
    
            <div class="bottombutton" onClick={turnPan}>
               立即领取 
    
                <div class="handle"></div> 
            </div>
        </div>
    </div>
    
</body>
<script src="./jquery-1.11.3.min.js"></script>
<script>
    function sleep (time) {
        return new Promise((resolve) => setInterval(()=>{
            console.log('3333')
            resolve()
        }, time));
    }
    sleep(3000).then(res=>{
        $('.handle').css('display','block')
        
        return sleep(2000)
    }).then(res2=>{
        $('.paninner').addClass('active');
        console.log('2222');
        // return sleep(2222)
    }).finally(res2=>{
        console.log('error');
    })
</script>
</html>